<template>

	<view class="box">
		<u-popup :show="show" :closeOnClickOverlay="false" mode="center" round="20">
			<view class="box-popup">
				<slot></slot>
				
				<view class="btn-box flex-no-horizontal" :style="{'justify-content': ifShowCancel ? 'space-between' : 'center'}">
					<button type="default" class="btn-cancel f-base flex-no-horizontal" @click="errClick" v-if="ifShowCancel">取消</button>
					<button type="default" class="btn-confrim f-base flex-no-horizontal" @click="successClick" v-if="ifShowCancel">确定</button>
					
					<button type="default" class="btn-confrim-one f-base flex-no-horizontal" @click="successClick" v-if="!ifShowCancel">确定</button>
					
				</view>
				
			</view>
		</u-popup>
	</view>

</template>

<script>
	/**
	 * @property {Boolean}			show					弹窗显示控制 
	 * @property {Boolean}			ifShowCancel			是否显示取消按钮
	 * @event {Function}			btnErrClick				取消按钮点击回调
	 * @event {Function}			btnSuccessClick			确认按钮点击回调
	 */
	export default {
		props: {
			show:{
				type:Boolean,
				default (){
					return false;
				}
			},
			ifShowCancel:{
				type:Boolean,
				default () {
					return false
				}
			}
		},
		data() {
			return {
				
			};
		},
		computed: {
	
		},
		methods: {
			errClick(){
				this.$emit('btnErrClick')
			},
			successClick(){
				this.$emit('btnSuccessClick')
			},
		},
	};
</script>

<style lang="scss">
	.box{
		
		.box-popup{
			width: 590rpx;
			height: 100%;
			padding: 40rpx;
			.btn-box{
				width: 100%;
				
				.btn-cancel{
					width: 45%;
					height: 80rpx;
					border-radius: 40rpx;
					background-color: rgba(222, 222, 222, 1);
					color: rgba(178, 180, 181, 1);
					justify-content: center;
				}
				
				.btn-cancel:after{
					border: 0;
				}
				
				.btn-confrim{
					width: 45%;
					height: 80rpx;
					background-color: rgba(0, 0, 0, 1);
					border-radius: 40rpx;
					color: #FFFFFF;
					justify-content: center;
				}
				
				.btn-confrim:after{
					border: 0;
				}
				
				.btn-confrim-one{
					justify-content: center;
					width: 100%;
					height: 98rpx;
					color: #FFFFFF;
					background-color: rgba(0, 0, 0, 1);
					border-radius: 49.5rpx;
				}
				
				.btn-confrim-one:after{
					border: 0;
				}
			}
			
		}
		
		
	}
</style>
